<template>
  <el-dialog :model-value="visible" @update:model-value="$emit('update:visible', $event)" width="80%"
    @close="closeDialog" :align-center="true"
    :close-on-click-modal="true" class="word-detail-dialog">
    <template #header="{ titleId }">
      <div class="my-header">
        <h2 :id="titleId">{{ word?.vocabulary || '单词详情' }}</h2>
      </div>
    </template>
    <div v-if="loading" class="word-detail-loading">
      <el-skeleton :rows="5" animated />
    </div>
    <div v-else-if="wordData" class="word-detail-content">
      <WordDetailDisplay :word-data="wordData" @play-pronunciation="playPronunciation" />
      <!-- 添加标记生词按钮，仅在用户登录且来自TextDisplay组件时显示 -->
      <div v-if="showMarkWordButton && isLoggedIn()" class="word-actions" style="margin-top: 20px; text-align: center;">
        <el-affix position="bottom" :offset="20">
          <el-button @click="toggleWordMark" :type="isMarked ? 'danger' : 'primary'" plain class="mark-word-button">
            {{ isMarked ? '取消生词' : '标记为生词' }}
          </el-button>
        </el-affix>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import http from '@/utils/http'
import { isLoggedIn } from '@/utils/auth'
import WordDetailDisplay from './WordDetailDisplay.vue'
import { ElDialog, ElSkeleton, ElButton, ElAffix } from 'element-plus'

export default {
  name: 'WordDetailDialog',
  components: {
    ElDialog,
    ElSkeleton,
    ElButton,
    WordDetailDisplay,
    ElAffix
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    word: {
      type: Object,
      default: null
    },
    // 新增属性，用于判断是否显示标记生词按钮
    showMarkWordButton: {
      type: Boolean,
      default: false
    },
    // 新增属性，用于传递当前单词是否已被标记
    isMarked: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible', 'close', 'toggle-word-mark'],
  data() {
    return {
      wordData: null,
      loading: false,
      audio: null
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.loadWordDetail();
      } else {
        this.closeDialog();
      }
    }
  },
  methods: {
    isLoggedIn,

    async loadWordDetail() {
      if (!this.word) return;

      this.loading = true;
      try {
        if (isLoggedIn()) {
          const response = await http.get(`/vocabulary/user/${this.word.vocabulary}`);
          this.wordData = response;
        }
        else {
          const response = await http.get(`/vocabulary/word/${this.word.vocabulary}`);
          this.wordData = response;
        }
        this.loading = false;
      } catch (err) {
        this.$message.error('获取单词详情失败');
        console.error(err);
        this.loading = false;
      }
    },

    closeDialog() {
      this.wordData = null;
      this.$emit('close');
    },

    playPronunciation() {
      // 播放发音逻辑
      if (this.wordData && this.wordData.pronunciation) {
        if (this.audio) {
          this.audio.pause();
        }

        this.audio = new Audio(`data:audio/mp3;base64,${this.wordData.pronunciation}`);
        this.audio.play();
      }
    },

    // 标记/取消标记生词
    toggleWordMark() {
      this.$emit('toggle-word-mark', this.wordData);
    }
  }
}
</script>

<style scoped lang="scss">
.word-detail-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    border-bottom: 1px solid #eee;

    .el-dialog__title {
      font-size: 1.5rem;
      font-weight: bold;
      color: #333;
    }
  }

  .my-header {
    h2{
      margin-block-start: 0;
      margin-block-end: 0;
      font-size: 2rem;
    }
  }
  :deep(.el-dialog__body) {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
  }

  .mark-word-button {
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    font-weight: 500;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;

      &:hover {
        transform: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    :deep(.el-dialog) {
      width: 95% !important;
    }

    :deep(.el-dialog__header) {
      padding: 15px;

      .el-dialog__title {
        font-size: 1.2rem;
      }
    }

    :deep(.el-dialog__body) {
      padding: 15px;
    }

    .mark-word-button {
      padding: 10px 15px;
      font-size: 0.9rem;
    }
  }
}
</style>